<template>
	<view class="">
		<view class="scroll_header"></view>
		<view class="relative" style="z-index: 1;">
			<view class="top-width">
				<view class="flex center-width" @click="all_shops_choose">
					<view class="content-txt">{{type_name}}</view>
					<image class="jt-top" v-if="all_shops == false"
						src="../../static/images/promotion/underneath.png.png" mode="widthFix">
					</image>
					<image class="jt-top" v-else src="../../static/images/promotion/superior.png.png" mode="widthFix">
					</image>
				</view>
				<view class="flex center-width" @click="paixun_all">
					<view class="content-txt">{{paixu_name}}</view>
					<image class="jt-top" v-if="all_paixu == false"
						src="../../static/images/promotion/underneath.png.png" mode="widthFix">
					</image>
					<image class="jt-top" v-else src="../../static/images/promotion/superior.png.png" mode="widthFix">
					</image>
				</view>
			</view>
			<!-- 全部商品弹窗 -->
			<view class="absolute" v-show="all_shops">
				<view class="all-shop-pop flex" :current="current1" @click="choose_type(item)"
					v-for="(item,index) in all_shops_list" :key="index">
					<view class="all-shop-width flex">
						<view class="tit-top">{{item.shop_name}}</view>
						<image class="duiimg" v-if="current1 == index" src="../static/dui.png" mode="widthFix"></image>
					</view>
				</view>
				<uv-overlay :show="show" zIndex="-1"></uv-overlay>
			</view>
			<!-- 按排序弹窗 -->
			<view class="absolute" v-show="all_paixu">
				<view class="all-shop-pop flex" :current="current2" @click="type_list_choose(item)"
					v-for="(item,index) in all_type_list" :key="index">
					<view class="all-shop-width flex">
						<view :class="current2 == index ? 'tit-top-xz' : 'tit-top'">{{item.shop_name}}</view>
						<view class="flex">
							<view class="flex">
								<image class="paixu_img" @click="asc(index)"
									:src="current2 == index && asc_show ?'../../static/images/new/asc-ac.png':'../../static/images/new/asc.png'"
									mode="widthFix">
								</image>
							</view>
							<view class="flex">
								<image class="paixu_img" @click="desc(index)"
									:src="current2 == index && desc_show ? '../../static/images/new/desc-ac.png' : '../../static/images/new/desc.png'"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<uv-overlay :show="show_paixu" zIndex="-1"></uv-overlay>
			</view>
		</view>
		<!-- 内容页面 -->
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll"
			@scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="center-center" v-else>
				<view class="center-content">
					<view class="shuliang-num">
						<view class="num-price">商品数量：{{shop_num}}</view>
						<view class="num-price">库存数量：{{kucun_num}}</view>
						<view class="num-price">库存金额：{{kucun_price}}</view>
					</view>
					<view class="shuji-list" v-for="(books,index) in bookLists" :key="index">
						<image class="shuji_img" :src="books.goods_img" mode=""></image>
						<view class="">
							<view class="tit-bt">{{books.goods_name}}</view>
							<view class="num-prcie-je">库存数量：{{books.goods_number}}册</view>
							<view class="num-prcie-gg">商品规格：{{books.attr_name}}册</view>
							<view class="num-prcie-je">成本：{{books.jin_price}}</view>
							<view class="num-prcie-je">金额：{{books.jin_price * books.goods_number}}</view>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				all_shops: false,
				show: false,
				show_paixu: false,
				asc_show: false,
				asc_show_close: true,
				desc_show: false,
				desc_show_close: true,
				current1: 0,
				type_name: '请选择',
				all_shops_list: [{
					id: 0,
					shop_name: '全部商品',
				}, {
					id: 1,
					shop_name: '有货商品',
				}, {
					id: 2,
					shop_name: '无货商品',
				}],

				all_paixu: false,
				paixu_name: '请选择',
				all_type_list: [{
					id: 0,
					shop_name: '按编辑时间',
					field: 'add_time',
				}, {
					id: 1,
					shop_name: '按排序权重',
					field: 'weights',
				}, {
					id: 2,
					shop_name: '按商品名称',
					field: 'goods_name',
				}, {
					id: 3,
					shop_name: '按商品价格',
					field: 'jin_price',
				}, {
					id: 4,
					shop_name: '按库存数量',
					field: 'goods_number',
				}, {
					id: 5,
					shop_name: '按商品销量',
					field: 'sales_volume',
				}],
				field: '',
				current2: 100,
				bookLists: [],
				kucun_num: '',
				shop_num: '',
				kucun_price: '',
				more: 1, // 第几页
				count: 10, // 条数
				scrollHeight: 0, // 自适应高度
				u_loadmore: true, // 加载中
				triggered: false, // 下拉刷新
				total: 0, // 总条数
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				order: '',
			}
		},
		onReady() {
			// 获取屏幕尺寸的方法 start
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
			// 获取屏幕尺寸的方法 end
		},
		onLoad() {
			this.getData()
			this.choose_type()
		},
		methods: {
			asc(idx) {
				console.log("升序为", idx);
				this.current2 = idx
				this.desc_show = false
				this.asc_show = true
				setTimeout(() => {
					this.all_paixu = false
				}, 100)
				this.order = 'ASC'
				this.getData()
			},
			desc(idx) {
				console.log("降序为", idx);
				this.current2 = idx
				this.desc_show = true
				this.asc_show = false
				setTimeout(() => {
					this.all_paixu = false
				}, 100)
				this.order = 'DESC'
				this.getData()
			},
			all_shops_choose() {
				this.all_shops = !this.all_shops
				this.show = true
				this.all_paixu = false
			},
			// 商品选择
			choose_type(e) {
				console.log("选择了第几个index", e);
				this.current1 = e.id
				this.all_shops = false
				this.type_name = e.shop_name
				this.getData()
			},
			paixun_all() {
				this.all_paixu = !this.all_paixu
				this.show_paixu = true
				this.all_shops = false
			},
			// 排序弹窗
			type_list_choose(e) {
				console.log("排序弹窗", e);
				this.current2 = e.id
				this.all_paixu = false
				this.paixu_name = e.shop_name
				this.field = e.field
				this.getData()
			},
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			// 上拉加载函数
			scrolltolower(e) {
				console.log("eeeeeeeeeee", e);
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if (that.bookLists.length == that.total) {
					return
				} else {
					setTimeout(() => {
						that.getData()
					}, 1000)
				}
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			// 上拉加载函数
			scrolltolower(e) {
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				setTimeout(() => {
					that.getData()
				}, 1000)
			},
			getData() {
				this.$H.post('v2/store/goods/index', {
					status: this.current1,
					field: this.field,
					order: this.order,
					pagination: {
						count: this.count,
						page: this.more
					},
				}).then(res => {
					this.total = res.paginated.total
					if (res.status.succeed == 1) {
						this.u_loadmore = false
						this.bookLists = res.data
						this.shop_num = res.paginated.count
						this.kucun_num = res.paginated.kucun
						this.kucun_price = res.paginated.price
					}
					console.log("获取账户明细列表", res);
				})
			},
		},
	}
</script>

<style>
	.num-prcie-je {
		font-size: 30rpx;
		color: #666;
		line-height: 40rpx;
	}

	.num-prcie-gg {
		font-size: 30rpx;
		color: #666;
		line-height: 40rpx;
		width: 520rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tit-bt {
		font-size: 33rpx;
		margin-bottom: 8rpx;
		width: 500rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #000;
	}

	.shuji-list {
		display: flex;
		padding: 30rpx 0 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.shuji_img {
		width: 154rpx;
		height: 154rpx;
		display: block;
		margin-right: 20rpx;
	}

	.absolute {
		position: absolute;
	}

	.relative {
		position: relative;
	}

	.num-price {
		font-size: 30rpx;
		color: #000;
		line-height: 40rpx;
	}

	.shuliang-num {
		padding: 30rpx 0 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.center-content {
		width: 690rpx;
		margin: auto;
	}

	.center-center {
		width: 750rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.paixu_img {
		width: 40rpx;
		margin-left: 30rpx;
		display: block;
	}

	.tit-top-xz {
		font-size: 30rpx;
		color: #ff8c08;
		font-weight: 600;
	}

	.tit-top {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
	}

	.duiimg {
		width: 40rpx;
		display: block;
	}

	.all-shop-width {
		width: 690rpx;
		padding: 20rpx 0 20rpx 0;
		margin: auto;
		justify-content: space-between;
	}

	.all-shop-pop {
		width: 750rpx;
		border-bottom: 1px solid #EEE;
		background-color: #fff;
	}

	.top-width {
		width: 750rpx;
		background-color: #fff;
		display: flex;
		padding: 20rpx 0 20rpx 0;
		align-items: center;
	}

	.center-width {
		width: 50%;
		justify-content: center;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.content-txt {
		font-size: 30rpx;
		color: #000;
		font-weight: 550;
	}

	.jt-top {
		width: 30rpx;
		display: block;
		margin-left: 20rpx;
	}
</style>